<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  securityJsCode: '5259a6dd89558b91587c49f18a0daf29'
}
export default {
  data() {
    return {
      map: null,
      target_lng:'',
      target_lat:'',
    }
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: 'b3ffe779e7e8620a015eaeb55e5f9876',
        version: '2.0',
        plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Geolocation']
      })
          .then(AMap => {
            this.map = new AMap.Map('container', {
              viewMode: '3D',
              zoom: 10,
              center: [110.929277, 21.685018]
            })
            this.map.addControl(new AMap.Scale())
            this.map.addControl(new AMap.ToolBar())
            this.map.addControl(new AMap.HawkEye())
            this.map.addControl(new AMap.MapType())
            this.map.addControl(new AMap.Geolocation())

            // 添加点击事件监听
            this.map.on('click', e => {
              this.target_lat = e.lnglat.lat
              this.target_lng = e.lnglat.lng
              console.log('点击位置的经纬度：', this.target_lat,this.target_lng )
            })
          })
          .catch(e => {
            console.log(e)
          })
    }
  },
  mounted() {
    this.initMap()
  }
}
</script>

<style>
#container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 500px;
}
</style>
